import React, { Component } from 'react'
import { Row, Col } from 'antd'
import './index.less'
export default class MyGrid extends Component{
  render() {
    return (
      <>
        <div className="box">
          <div className="box-header">gutter</div>
          <div className="box-body">
            <div>
              <div className="box-title">基本用法</div>
              <div className="box-content">
                <Row gutter={16}>
                  <Col span={6}>
                    <div className="col-box">col-6</div>
                  </Col>
                  <Col span={10}>
                    <div className="col-box">col-10</div>
                  </Col>
                  <Col span={8}>
                    <div className="col-box">col-8</div>
                  </Col>
                </Row>
              </div>
            </div>
            <div>
              <div className="box-title">响应式&垂直方向间隔</div>
              <div className="box-content">
                <Row gutter={[{ xs: 8, sm: 16, md: 24, lg:32 }, 16]}>
                  <Col span={6} xs={24}>
                    <div className="col-box">col-6</div>
                  </Col>
                  <Col span={10} xs={24}>
                    <div className="col-box">col-10</div>
                  </Col>
                  <Col span={8} xs={24}>
                    <div className="col-box">col-8</div>
                  </Col>
                </Row>
              </div>
            </div>
          </div>
          <div className="box-footer warning">
            水平、垂直方向gutter设置[x, y]
          </div>
        </div>
        <div className="box">
          <div className="box-header">offset&justify&align</div>
          <div className="box-body">
            <div>
              <div className="box-title">offset</div>
              <div className="box-content">
                <Row gutter={16}>
                  <Col span={6}>
                    <div className="col-box">col-6</div>
                  </Col>
                  <Col span={10} offset={8}>
                    <div className="col-box">col-10-offset-8</div>
                  </Col>
                </Row>
              </div>
            </div>
            <div>
              <div className="box-title">justify&align</div>
              <div className="box-content">
                <Row gutter={16} justify="center" align="middle">
                  <Col span={6}>
                    <div className="col-box" style={{ height: '100px' }}>col-6</div>
                  </Col>
                  <Col span={6}>
                    <div className="col-box" style={{ height: '60px' }}>col-6</div>
                  </Col>
                </Row>
              </div>
            </div>
          </div>
        </div>
      </>
    )
  }
}